<style lang="scss">
.my {
	padding: 10rpx 30rpx;
	// 头像
	.user-img {
		width: 200rpx;
		height: 200rpx;
		// line-height: 200rpx;
		text-align: center;
		border-radius: 50%;
		// 溢出部分隐藏
		overflow: hidden;
		// 上下20rpx边距  左右居中显示
		margin: 20rpx auto;
		.img {
			width: 100%;
			vertical-align: middle;
		}
	}
	// 昵称
	.user-name {
		// 文本水平居中
		text-align: center;
		padding: 20rpx 0;
	}
	// 时间
	.user-time {
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
		color: #ccc;
		.txt {
			color: #666;
		}
	}
	// 列表
	.user-list {
		margin-top: 100rpx;
		.list-item {
			.link {
				// 把链接组件转容器组件
				display: block;
				width: 100%;
				// 设置高度
				height: 100rpx;
				// 设置行高
				line-height: 100rpx;
				// 设置下边框线
				border-bottom: 1px solid #ccc;
			}
		}
	}
}
</style>


<template>
	<view class="my">
		  <!-- 1.0 用户头像 -->
		  <view class="user-img">
			   <image 
					class="img"
					src="../../static/img/user.jpg" 
					mode="widthFix">
				</image>
		  </view>
		  <!-- 2.0用户昵称 -->
		  <view class="user-name">
			  <text>昵称: Tom</text>
		  </view>
		  <!-- 3.0 创建时间 -->
		  <view class="user-time">
			  创建时间:<text class="txt">2020-10-10 12:30:56</text>
		  </view>
		  
		  <!--4.0 列表 -->
		  <view class="user-list">
			  <view class="list-item">
				  <navigator url="/pages/detail/detail" class="link">
					  我的账号
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/detail/detail" class="link">
					  我的收藏
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/detail/detail" class="link">
					  关于我们
				  </navigator>
			  </view>
			  
			  <view class="list-item">
				  <navigator url="/pages/detail/detail" class="link">
					  平台协议
				  </navigator>
			  </view>
		  </view>
	</view>
	
</template>

<script setup>
	
</script>


